import React from "react";
import "./sass/index.scss";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";
import {inject,observer} from 'mobx-react'
import { Drawer } from 'antd';
import {url,lyric} from '../../api'
import { axiosGet } from '../../axios'

@inject('song')@observer
 class Footer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
    };
  }
  //  打开歌曲页面
  isSongPage(is){
    this.props.song.isSongPage = is
  }
  //  关闭歌曲页面
  closeSongPage(is){
    this.props.song.isSongPage = is
  }
  //  获取歌词
  getLyric(){
      axiosGet(url,lyric,`id=${this.props.song.song.id}`)
      .then(data=>{
          console.log(data)
      })
  }
  render() {
      if(this.props.song.song.id){
          this.getLyric()
      }
      console.log(this.props.song)
      const imgStyle= {width:'200px',height:'200px',borderRadius:'50%'}
    return (
      <div className="footer">
          {this.props.song.songImgUrl.picUrl &&
              <img src={this.props.song.songImgUrl.picUrl} alt='' className='songImg' onClick={()=>{this.isSongPage(true)}}></img>
          }
            <AudioPlayer
            src={this.props.song.song.url}
            onPlay={(e) => console.log("onPlay")}
            onClickPrevious={(e) => console.log("上")}
            onClickNext={(e) => console.log("下")}
            layout="horizontal-reverse"
            showSkipControls={true}
            showJumpControls={false}
            className='player'
          ></AudioPlayer>
        <Drawer
        title=""
        placement="bottom"
        onClose={()=>{this.closeSongPage(false)}}
        visible={this.props.song.isSongPage}
        style={{zIndex:'100',paddingTop:'100px'}}
        drawerStyle={{paddingTop:'100px',textAlign:'center'}}
        maskStyle={{height:'0px'}}
        bodyStyle={{}}
        height='100vh'
        className='songPage'
      >
        <div className='content'>
            <div className='left'>
                <img src={this.props.song.songImgUrl.picUrl} alt='' style={{...imgStyle}} />
            </div>
            <div className='right'>歌词api接口暂时不可用</div>
            <div className='close' onClick={()=>{this.closeSongPage(false)}} style={{cursor:'pointer'}}>关闭</div>
        </div>
 
      </Drawer>
      </div>
    );
  }
}
export default Footer